<template>
  <div id="app">
    <h2>测试题</h2>
    <subject v-for="(item, index) in count" :key="item" :num1="num1[index]" :num2="num2[index]" @success="success"
      :i="index">
    </subject>
    <div>
      <flag v-for="(item, index) in answer" :key="index" :count="index + 1" :flag="item"></flag>
    </div>
  </div>
</template>

<script>
import subject from './components/SubjectItem.vue';
import flag from './components/FlagItem.vue';
export default {
  components: {
    subject,
    flag
  },
  data() {
    return {
      num2: [],
      num1: [],
      count: [1, 2, 3, 4, 5],
      answer: [null, null, null, null, null]
    }
  },
  created() {
    this.getNumber()
    console.log(this.num1, this.num2)
  },
  methods: {
    getNumber() {
      for (let i = 0; i < 5; i++) {
        this.num1.push(Math.floor(Math.random() * 10))
        this.num2.push(Math.floor(Math.random() * 10))
      }
    },
    success(val) {
      console.log(val)
      this.answer[val.index] = val.isRight
      this.answer = this.answer.filter(item => item === item)
    }
  }
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>